<template>
	<view class="unbinding_layout" v-if="dataItem">
		<view class="top">
			<view class="headImg">
				<image :src="dataItem.headUrl" mode="aspectFill"></image>
			</view>
			<view class="devicename">
				{{dataItem.dvName}}
			</view>
		</view>

		<view class="imei">
			ICCID:{{dataItem.imei}}
		</view>
		<view class="unbinding" @click="unbindingDevice">
			{{$t('unbindingdevice.unbinding')}}
		</view>
	</view>
</template>
<script setup>
	import {ref } from 'vue';
	import { apiUserUnbindingDevice } from '../../api/user_api';
	import { apiGetDeviceInfo } from '../../api/device_api';
	import { i18nTool } from '../../utils/i18en';
	import{onLoad} from "@dcloudio/uni-app";
import { getImei, removeCurrentImei } from '../../utils/user_tools';
	
	
	const dataItem = ref(null);
	function unbindingDevice() {
		uni.showModal({
			cancelColor:"#606060",
			cancelText:i18nTool('unbindingdevice.cancel'),
			confirmText:i18nTool('unbindingdevice.sure'),
			confirmColor:"#18bc37",
			title:i18nTool('unbindingdevice.hint'),
			content:i18nTool('unbindingdevice.msg'),
			success(res){
				if(res.confirm){
					unbindingDeviceRequest();
				}else{
					
				}
				
			}
			
		})
		
	}
	
	async function unbindingDeviceRequest(){
		let res = await apiUserUnbindingDevice({imei:dataItem.value.imei});
		removeCurrentImei();
		uni.reLaunch({
			url:"/pages/map/map"
		})
	}
	
	async function getDeviceInfo(imei){
		let res = await apiGetDeviceInfo({imei:imei});
		 dataItem.value = res.content;
		 dataItem.value.imei = imei;
	}
	
	onLoad(()=>{
		let imei = getImei();
		if (imei) {
			getDeviceInfo(imei);
		}
		uni.setNavigationBarTitle({
			title:i18nTool('unbindingdevice.navTitle'),
		})
	})
	
	
</script>

<style lang="scss" scoped>
	.unbinding_layout {
		padding: 100rpx 40rpx;

		.top {
			display: flex;
			align-items: center;
			justify-content: start;

			.headImg {
				width: 120rpx;
				height: 120rpx;
				border-radius: 50%;
				// border:4rpx solid #53786C;
				overflow: hidden;
				padding: 2rpx  2rpx;
				image {
					width: 100%;
					height: 100%;
					border-radius: 50%;
				}
			}

			.devicename {
				padding-left: 10rpx;
				font-size: 36rpx;
				color: #333;
			}
		}

		.imei {
			margin-top: 40rpx;
			color: #333;
			font-size: 36rpx;
		}

		.unbinding {
			margin-top: 60rpx;
			height: 80rpx;
			color: #fff;
			background-color: #53786C;
			border-radius: 40rpx;
			@include flex-box-set(center);

		}

	}
</style>